<template>
  <!-- 
  点击歌单 查看歌单详情
 -->
  <div>
    <p id="loading-btn" class="beBack" @click="back">
      <button>
        <span>
          <svg
            class="icon"
            width="17"
            height="17"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-042ca774=""
          >
            <path
              fill="currentColor"
              d="M224 480h640a32 32 0 110 64H224a32 32 0 010-64z"
            ></path>
            <path
              fill="currentColor"
              d="M237.248 512l265.408 265.344a32 32 0 01-45.312 45.312l-288-288a32 32 0 010-45.312l288-288a32 32 0 1145.312 45.312L237.248 512z"
            ></path>
          </svg>
          返回
        </span>
      </button>
    </p>
    <div class="songList">
      <div class="header">
        <div>
          <!-- 歌单信息 -->
          <img :src="playListInfo.coverImgUrl" width="100px" alt="">
          <p>{{playListInfo.name}}</p>
          <p>播放:{{playListInfo.playCount}}</p>
          <p>收藏:{{playListInfo.trackCount}}</p>
        </div>
        <div>
          <!-- 歌单作者 -->
          <img :src="playListInfo.creator.avatarUrl" width="20px" alt="">
          <p>{{playListInfo.creator.nickname}}</p>
        </div>
      </div>
      <div class="body">
        <ul class="songItem">
          <li v-for="song in playDetailInfo.songs" :key="song.al.id" @dblclick="playSong(song)">
            <img style="width: 21px; height: 21px" :src="song.al.picUrl" alt=""/>
            <span>{{ song.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlayListDetail",

  props: {
    // 歌单里面的一大堆歌曲信息
    playDetailInfo: {
      type: Object,
    },
    // 歌单信息
    playListInfo: {
      type: Object,
    },
  },

  data() {
    return {
      // 歌单信息也要的 暂时 不转化 props
      // playListInfo: "",
      // 接收到歌曲详情信息
      // songsInfo: "",
    };
  },

  watch: {
    // playDetailInfo: {
    //   handler: function (value, oldValue) {
    //     if (value) {
    //       this.songsInfo = value
    //     }
    //   }
    // }
  },

  mounted() {},

  methods: {
    back() {
      console.log("返回");
      this.$emit("changeShowComponents");
    },
    // 播放歌曲 双击
    playSong(song) {
      console.log('选中的歌曲信息', song)
    }
  },
};
</script>

<style lang="less" scoped>
.beBack {
  padding: 0 10px 10px 0;
  width: 100 px;
  user-select: none;

  span {
    padding-left: 6px;
  }
  button {
    background: transparent;
    border: 0;
    border-radius: 4px;
    text-transform: uppercase;
    // font-weight: bold;
    font-size: 16px;
    padding: 5px 25px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    line-height: 30px;
  }

  button:before {
    transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
    content: "";
    width: 1%;
    height: 100%;
    background: #ff5964;
    position: absolute;
    top: 0;
    left: 0;
  }

  button span {
    mix-blend-mode: darken;
    cursor: pointer;
  }

  button:hover:before {
    background: #e75660;
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
  }
}
.songList {
  height: 90%;
  overflow-y: auto;
  overflow-x: clip;
  border: 1 px solid;

  .header {
    width: 100%;
    height: 27%;
    border: 2px solid red;
  }
  .body {
    width: 100%;
    // height: 73%;
    border: 2px solid rgb(0, 162, 226);

    .songItem {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        margin: 9px 13px;
        padding: 7px;
        cursor: pointer;
        color: #797979;
        font-size: 17.5px;
      }
    }
  }
}
</style>